<template>
  <div>
    <table border="1px">
      <thead>
        <tr>
          <th width="200">编号</th>
          <th width="200">名称</th>
          <th width="200">单价</th>
          <th width="200">数量</th>
          <th width="200">小计</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in info" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>
            <el-input-number
              v-model="item.num"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
            ></el-input-number>
          </td>
          <td>{{ item.price * item.num }}</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5">总价: ￥{{ sum }}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: [
        {
          id: 1,
          name: "apple",
          price: 3,
          num: 1,
        },
        {
          id: 2,
          name: "pear",
          price: 4,
          num: 3,
        },
        {
          id: 3,
          name: "banana",
          price: 5,
          num: 4,
        },
      ],
      sum: 0,
    };
  },
  methods: {
    handleChange() {
      this.sum = 0;
      this.info.forEach((item) => {
        this.sum += item.price * item.num;
        console.log(this.sum);
      });
    },
  },
  created(){
      this.handleChange()
  }
};
</script>

<style lang="less" scoped>
table {
  border-collapse: collapse;
  text-align: center;
}
</style>